<template>
  <div class='tbody row'>
    <!-- <div class="videos"></div> -->
    <!-- <video class="videos" src="../../assets/movie.ogg" controls="controls">
your browser does not support the video tag
</video> -->
<video
        id="myVideo"
        class="video-js videos vjs-default-skin vjs-big-play-centered"
        loop 
        controls
        poster='../../assets/bigcar.jpg'
   preload="auto">
     <source :src="require('../../assets/douyin.mp4')" type="video/mp4" >
        </video>
    <div class="rect">
       <div class="row smbox acen jcen">
         <i style="font-size:30px;color:#6791B7;" class="el-icon-close"></i>
          <div>{{mytxt}}</div>
       </div>
       
    </div>
    <div class="mright">
       <div style="font-size:22px;" class="row photos cfff">
            <div style="margin-left:3vw;" class="item col acen jcen">
                 <div v-if='ZT==0'>
                <div>身份</div>
                <div>证照</div>
                </div>
                <el-image v-else
      style="width: 100%; height: 100%"
      :src="require('../../assets/idcard.png')"
      fit="cover"></el-image>
            </div>
            <div style="margin-left:1.5vw;" class="item col acen jcen">
                <div v-if='ZT==0'>
                <div>抓拍</div>
                <div>照片</div>
                </div>
                 <el-image v-else
      style="width: 100%; height: 100%"
      :src="require('../../assets/catch.png')"
      fit="cover"></el-image>
            </div>
       </div>
    </div>
    <div v-if='ZT==0' class="msg cfff col acen jcen abs b">
          <div>刷身份证，看摄像头</div>
          <div>做人证审核</div>
       </div>
       <div v-if='ZT==1' class="msg cfff col acen abs">
        <i style="font-size:60px;color:#FA4C43;" class="el-icon-error"></i>
          <!-- <i style="font-size:60px;color:#FA4C43;" class="iconfont icon-yduicuowushixin"></i> -->
          <div class='b'>刘德华，审核未通过</div>
          <div style="font-size:18px;margin-top:40px;">重刷身份证，再次审核</div>
       </div>
       <div v-if='ZT==2' class="msg cfff col acen abs">
           <el-image
      style="width: 60px; height: 60px;"
      :src="require('../../assets/right.png')"
      fit="cover"></el-image>
          <div class='b'>张学友，审核通过</div>
          <div style="font-size:18px;margin-top:40px;">正在处理任务数据，请稍候...</div>
       </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
        ZT:0,
        mytxt:'取消',
        num:60,
        videos:require('../../assets/test.mp4')
    };
  },
  methods: {
    goToNext(){
      this.$router.push({ path: "/second" });
    },
    // initVideo() {
    //     //初始化视频方法
    //     let myPlayer = this.$video(myVideo, {
    //         //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
    //         controls: true,
    //         //自动播放属性,muted:静音播放
    //         autoplay: "muted",
    //         //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
    //         preload: "auto",
    //         //设置视频播放器的显示宽度（以像素为单位）
    //         width: "800px",
    //         //设置视频播放器的显示高度（以像素为单位）
    //         height: "400px"
    //     });
    //     },
    txtValue(){
      let that=this
      var timeid=setInterval(function(){
         that.mytxt = `剩${that.num}秒`
         if(that.num==0){
           clearInterval(timeid)
         }
         that.num--;
         
      },1000)
    }
  },

  created: function() {
      let that=this
      setTimeout(function(){
         that.ZT = 1
         that.txtValue();
      },1500)
      setTimeout(function(){
         that.ZT = 2
      },4500)
  },
  mounted: function() {
    
  }
};
</script>
<style scoped>
  .tbody{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }
  .rect {		
     position: absolute;
     color:#5B8AC0;
     top: 10vh;
    left: 22.22vw;
    width: 22.22vw;
    height: 29.62vw;
		border-radius:5px;
		background: linear-gradient(to left, #EE5955, #EE5955) left top no-repeat, 
					linear-gradient(to bottom, #EE5955, #EE5955) left top no-repeat, 
					linear-gradient(to left, #EE5955, #EE5955) right top no-repeat,
					linear-gradient(to bottom, #EE5955, #EE5955) right top no-repeat, 
					linear-gradient(to left, #EE5955, #EE5955) left bottom no-repeat,
					linear-gradient(to bottom, #EE5955, #EE5955) left bottom no-repeat,
					linear-gradient(to left, #EE5955, #EE5955) right bottom no-repeat,
					linear-gradient(to left, #EE5955, #EE5955) right bottom no-repeat;
		background-size: 5px 30px, 30px 5px, 5px 30px, 30px 5px; 
  }
  .smbox{
  border-radius: 20px;
    width: 10vw;
    height: 40px;
    border: 2px solid #5B8AC0;
    background-color: #E5E4DF;
    opacity: 0.9;
    top: -30px;
    position: absolute;
    left: -9vw;
  }
  .videos{
      width: calc(100% * 2 / 3);
      height: 100vh;
      background-color: #000;
  }
  .mright{
      width: calc(100% * 1 / 3);
      height: 100vh;
      background-color: #76685B;
  }
  .msg{
      width:calc(100% * 1 / 3);
      right: 0;
      top: 60.66vh;
      line-height: 40px;
    font-size: 25px;
  }
  .photos{
      width: 33.33vw;
      margin-top:3vw;
  }
  .item{
      width: 12.91vw;
      height: 17.21vw;
      background-color: #4C4C4C;
  }
</style>